<template>
  <div>
    <div class="item-block item-block2 order-info-block">

      <!-- v-if="detail.refuse_reason || (detail.address_id>0 && detail.is_self_take!=1 && (detail.id_cert_name || detail.card)) || detail.email || detail.message" -->
      <div class="title">订单信息</div>
      <div class="line-con">
        <div class="label">订单编号：</div>
        <div class="line-detail">
          <span>{{detail.order_no}}</span>
          <van-button round :hairline="false" class="copy" @click="copyClick(detail.order_no,$event)">复制</van-button>
        </div>
      </div>
      <div class="line-con" v-if="detail.transaction_id">
        <div class="label">微信批次单号：</div>
        <div class="line-detail">
          <span>{{detail.transaction_id}}</span>
        </div>
      </div>
      <!--    梅之音生物 定制 微信号  start    -->
      <div class="title" style="margin-top: 10px" v-if="detail.weixin_account">上级服务商</div>
      <div class="line-con" v-if="detail.weixin_account">
        <div class="label">微信号：</div>
        <div class="line-detail">
          <span>{{detail.weixin_account}}</span>
          <van-button round :hairline="false" class="copy" @click="copyClick(detail.weixin_account,$event)">复制</van-button>
        </div>
      </div>
      <!--    梅之音生物 定制 微信号  end    -->
      <div v-if="detail.is_self_take==1">
        <div class="line-con location">
          <div class="location-box">
            <div class="label">配送方式：</div>
            <div class="line-detail">{{detailAll.take_their_name}}</div>
          </div>
        </div>
        <div class="line-con location" v-if="detail.is_self_take==1">
          <div class="location-box">
            <div class="label">联系人：</div>
            <div class="line-detail">{{detail.self_address_name}} {{detail.self_address_mobile}}</div>
          </div>
        </div>
        <div class="line-con location" v-if="detail.is_self_take==1">
          <div class="location-box">
            <div class="label">提货地址：</div>
            <div class="line-detail">{{detail.self_address}}</div>
          </div>
          <div class="location-btn" v-if="detail.status == 2 && detail.is_dhs_virtual != 1 && detailAll.is_dz_one == 1">
            <span v-if="is_wx==1 && detailAll.store" @click="openLocation">{{detailAll.new_store_name}}导航</span>
          </div>
        </div>
      </div>
      <div class="line-con location" v-if="detail.pay_type_name">
        <div class="location-box">
          <div class="label">支付方式：</div>
          <div class="line-detail">{{detail.pay_type_name}}</div>
        </div>
      </div>
      <div class="line-con" v-if="detail.refuse_reason">
        <div class="label">拒绝理由：</div>
        <div class="line-detail">{{detail.refuse_reason}}</div>
      </div>

      <!-- <div class="addr" v-if="detailData.email">邮箱地址：{{detailData.email}}</div> -->
      <div class="line-con" v-if="detail.email">
        <div class="label">邮箱地址：</div>
        <div class="line-detail">{{detail.email}}</div>
      </div>

      <div class="line-con" v-if="detail.message">
        <div class="label">买家留言：</div>
        <div class="line-detail">{{detail.message}}</div>
      </div>
      <!--修改身份证号弹窗-->
      <van-dialog
        v-model="showChangeDialog"
        :title="dialogTitle"
        show-cancel-button
        close-on-click-overlay
        @confirm="clickConfirmSend"
        class="common-confirm"
        @close="closeDialog"
      >
        <div class="donation-box">
          <div class="con-box">
            <div class="input-box clearfix" v-if="detail.address_id > 0 && detail.is_self_take != 1 && detail.id_cert_name">
              <label for="">姓名：</label><input type="text" v-model="formData.id_cert_name"/>
            </div>
            <div class="input-box clearfix">
              <label>身份证号：</label><input type="text" name="id-number" v-model="card_no"/>
            </div>
          </div>
        </div>
      </van-dialog>
    </div>
    <div class="item-block item-block2 order-info-block" v-if="detail.address_id>0 && detail.is_self_take!=1 && (detail.id_cert_name || detail.card)">
      <div class="title other">身份证信息</div>
      <div class="id-info">
        <div class="info">
          <div class="line-con" v-if="detail.id_cert_name">
            <p class="line-detail">
              {{detail.id_cert_name}}
              <span v-if="detail.card_img">（照片已上传）</span>
            </p>
          </div>
          <div class="line-con" v-if="detail.card">
            <p class="line-detail">
              {{detail.card}}
            </p>
          </div>
        </div>
        <van-button class="btn change-id" round @click="changeIdCard">编辑</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { modifyOrderIdCardNo } from '@/api/order/order.js'
import { isWeixinCient } from '@/utils/validate'
export default Vue.extend({
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      showChangeDialog: false,
      card_no: '',
      formData: {
        id_cert_name: '',
        order_no: '',
        card_no: ''
      },
      is_wx: 1
    }
  },
  created() {
    this.init()
  },
  computed: {
    dialogTitle() {
      if (this.detail.address_id > 0 && this.detail.is_self_take != 1) {
        if (this.detail.id_cert_name && this.detail.card) {
          return '修改姓名及身份证号'
        } else if (this.detail.card && !this.detail.id_cert_name) {
          return '修改身份证号'
        }
      } else {
        return ''
      }
    }
  },
  methods: {
    init() {
      if (isWeixinCient()) { // 微信环境
        this.is_wx = 1
      } else { // 非微信环境
        this.is_wx = 0
      }
    },
    // 复制
    copyClick(text, e) {
      // TODO 微分销复制与小程序差别
        wx.setClipboardData({
          data: text,
          success (res) {
            wx.getClipboardData({
              success(res) {
                wx.showToast({
                  title: '复制成功',
                  icon: 'none',
                });
              }
            })
          }
        })
    },
    //门店导航
    openLocation(){
      const storeData=this.detailAll.store
      // TODO 微分销门店导航与小程序差别
      wx.openLocation({
        latitude:parseFloat(storeData.latitude),
        longitude:parseFloat(storeData.longitude),
        name:storeData.shop_name,
        address:storeData.address_info,
        scale:14,
        complete: (res) => {
          // console.log(res, '门店导航')
        }
      })
    },
    // 修改身份证号
    changeIdCard() {
      this.formData.order_no = this.detail.order_no
      this.showChangeDialog = true
    },
    clickConfirmSend() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const sendData = {
        order_no: this.detail.order_no,
        card_no: this.card_no,
        id_cert_name: this.formData.id_cert_name
      }

      // console.log(sendData)
      modifyOrderIdCardNo(sendData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('修改成功')
          this.$emit('init')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    closeDialog() {
      this.formData.card_no = ''
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/order/detail";
// 身份证信息
.other.title{
  padding-bottom: 10px;
}
.id-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 18px;
  .info{
    flex: 1;
    padding: 0 0;
    .line-detail{
      padding: 0 0 8px 0 !important;
      border: none !important;
    }
  }
}
//修改身份证号弹窗
.donation-box{
  .con-box{
    position:relative;
    padding:40px 30px;
  }
  .input-box{
    margin:16px 0;
    font-size:28px;
    label{
      float:left;
      display:block;
      width:150px;
      line-height:76px;
      text-align:right;
      font-weight:normal;
      color: #666666;
    }
    input{
      float:left;
      -webkit-appearance: none;
      width:360px;
      height:76px;
      padding:16px 10px;
      border:2px solid #EDEDED;
      border-radius:6px;
    }
  }
}
</style>
